<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <link rel="shortcut icon" href="images/logo W.jpg" />
        <title>Work to Worker</title>
        <style type="text/css">
            @font-face {
                font-family: "jokerman";
                src: url('font/VIVALDII.TTF') format("truetype");
            }
        </style>
    </h:head>
    <h:body>
        <ui:composition>            
            <div style="padding-top: 10px">
                <ul>
                    <li style="display: inline-block;vertical-align: top;margin-left: -20px">
                        <ul style="margin-left: 0px">
                            <li style="list-style: none;font-size: 50px;font-weight: bold;color: #0099ff;font-style: italic;font-family: jokerman " id="fix1">
                                <font style="color: red">Work</font> <font style="color: #604E9D">to</font> <font style="color: blue">Worker</font>  
                            </li>
                        </ul>
                        <ul style="margin-top: -20px;margin-left: 40px">
                            <li style="list-style: none;margin-left: 30px; font-size: 30px;color: red">
                                We offer you the <font style="font-weight: bold;font-style: italic;font-size: 50px;font-family: jokerman;color: blue">opportunity</font>
                            </li>
                        </ul>
                    </li>
                    <li style="display: inline-block;vertical-align: top;margin-left: 10px">
                        <img src="images/Logo W.png" width="120" height="90" alt="logo W"/>
                    </li>
                    <li style="display: inline-block;vertical-align: top;text-align: right;margin-left: -80px">

                        <ul>
                            <h:form >
                                <li style="display: inline;color: black">
                                    <img src="images/vn.png" width="10" height="10" alt="vietnam"/><h:commandButton value="Tiếng Việt" style="border: none;cursor: pointer;background-color: white;font-family: Serif;font-size: 101%"/>
                                </li>
                                <li style="display: inline;color: black">
                                    <img src="images/uk.png" width="10" height="10" alt="vietnam"/><h:commandButton value="English" style="border: none;cursor: pointer;background-color: white;font-family: Serif;font-size: 101%"/>
                                </li>
                            </h:form>
                        </ul>


                        <ul style="margin-top: 10px">
                            <h:form>
                                <c:if test="#{loginBean.username!=null}">
                                    <li style="display: inline;font-size: 20px;margin-left: 80px">Welcome: <h:commandLink action="#{loginBean.goPage()}" value="#{loginBean.username}" />
                                        <a href="#" style="font-family: serif; font-size: 15px; color: red;">*3 msg</a></li>
                                    <li style="display: inline;font-size: 20px;margin-left: 5px"><h:commandLink  value="#{msg['global.Logout']}" action="#{loginBean.logout()}" style="color: red;"/></li>
                                </c:if>
                                <c:if test="#{loginBean.username==null}">
                                    <li style="display: inline;font-size: 20px;margin-left: -20px"><a href="login.xhtml" style="color: red;"> <h:outputText value="#{msg['global.login']}" /> </a></li>
                                    <li style="display: inline;margin-left: 5px;color: #1A3665"> <h:outputText value="#{msg['global.or']}" /> </li>
                                    <li style="display: inline;font-size: 20px;margin-left: 5px"><a href="signup.xhtml" style="color: red;"> <h:outputText value="#{msg['global.signupfree']}" /> </a> </li>
                                </c:if>
                            </h:form>
                        </ul>

                    </li>
                </ul>
            </div>  
            <div>
                <ul style="margin-top: 30px;border-bottom: 5px;border-bottom-style: solid;border-bottom-color: #1A3665;text-align: center" >
                    <li id="menudiv"  style="display: inline;font-weight: bold;font-size: 20px;color: #1A3665;border-left: 1px;border-left-style:  solid;padding-left: 40px;padding-right: 40px">
                        <a href="home.xhtml" style="color: #1A3665">Home</a>
                    </li>
                    <li id="menudiv" style="display: inline;font-weight: bold;font-size: 20px;color: #1A3665;border-left: 1px;border-left-style:  solid;padding-left: 40px;">
                        <a href="worker.xhtml" style="color: #1A3665">Worker</a>
                    </li>
                    <li id="menudiv" style="display: inline;font-weight: bold;font-size: 20px;margin-left: 40px;border-left: 1px;border-left-style:  solid;padding-left: 40px;border-right: 1px;border-right-style:  solid;padding-right: 40px">
                        <a href="employment.xhtml" style="color: #1A3665">Employment</a>
                    </li>
                </ul>            
            </div>
        </ui:composition>
    </h:body>
</html>

